<template>
	<view class="page">
		<!-- 优惠券tab -->
		<view class="coupon-tab">
			<view class="tab" :class="{'action': coupon_status === 2}" @click="onCouponTab(2)">
				<text>未使用</text>
				<text class="line"></text>
			</view>
			<view class="tab" :class="{'action': coupon_status === 1}" @click="onCouponTab(1)">
				<text>已使用</text>
				<text class="line"></text>
			</view>
			<view class="tab" :class="{'action': coupon_status === 3}" @click="onCouponTab(3)">
				<text>已过期</text>
				<text class="line"></text>
			</view>
		</view>

		<!-- 优惠券列表 -->
		<view class="coupon-list">
			<view class="list" v-for="(item, index) in couponList" :key="item.id">
				<view class="list-data" :class="{'coupon-lose': item.coupon_status !== 2}">
					<view class="coupon-price">
						<view class="discounts">
							<text class="min">￥</text>
							<text class="max">{{ item.discount_value }}</text>
						</view>
						<view class="full-reduction"><text>{{ item.coupon_introduce }}</text></view>
						<view class="jag"></view>
					</view>
					<view class="coupon-info">
						<view class="info-title">
							<view class="tag"><text>限品类券</text></view>
							<view class="title"><text>{{ item.coupon_title }}</text></view>
						</view>
						<view class="date-get">
							<view class="date"><text>有效期至：{{ item.coupon_expiration }}</text></view>
							<view class="get" @click="onCouponUse" v-if="item.coupon_status === 2">
								<text>立即使用</text>
							</view>
						</view>
						<view class="describe-title" @click="toggleDescribe(index)">
							<text>详细信息</text>
							<text class="iconfont icon-more more"
								:style="activeIndex === index ? 'transform: rotate(-90deg);' : 'transform: rotate(90deg);'"></text>
						</view>
					</view>
				</view>
				<view class="use-status" v-if="item.coupon_status !== 2">
					<text v-if="item.coupon_status === 1">已使用</text>
					<text v-else-if="item.coupon_status === 3">已过期</text>
				</view>
				<view class="describe" v-show="activeIndex === index">
					<text>限品类：{{ item.coupon_introduce }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import coupons from '../api/coupons';
	export default {
		data() {
			return {
				coupon_status: 2, // 当前选中的优惠券状态（默认未使用）
				couponList: [], // 优惠券列表
				activeIndex: -1 // 当前展开的优惠券索引
			};
		},
		onLoad() {
			this.fetchCouponList();
		},
		methods: {
			// 切换优惠券tab
			onCouponTab(type) {
				this.coupon_status = type;
				this.fetchCouponList(); // 更新列表
			},
			// 获取优惠券数据
			fetchCouponList() {
				uni.request({
					url: 'http://127.0.0.1:8899/coupon/user/center/coupon/list',
					method: 'POST',
					data: {
						user_id: 2, // 修改为实际用户ID
						coupon_status: this.coupon_status,
					},
					success: (res) => {
						if (res.data.code === 0 && res.data.data.coupon_list) {
							this.couponList = res.data.data.coupon_list;
						} else {
							this.couponList = [];
							uni.showToast({
								title: '暂无优惠券',
								icon: 'none'
							});
						}
					},
					fail: (err) => {
						console.error('请求失败:', err);
						uni.showToast({
							title: '网络错误',
							icon: 'none'
						});
					}
				});
				/* coupons.UserCenterCouponList({
					user_id: 2, // 修改为实际用户ID
					coupon_status: this.coupon_status,
				}).then(res => {
					console.log(res)
					if (!res.data) {
						console.log('获取失败');
						return
					}
					this.couponList = res.couponList.concat(res.data.coupon_list)
				}) */
			},
			// 切换详细信息展开状态
			toggleDescribe(index) {
				this.activeIndex = this.activeIndex === index ? -1 : index;
			},
			// 立即使用
			onCouponUse() {
				uni.navigateTo({
					url: '/pages/SearchGoodsList/SearchGoodsList',
				});
			},
		},

	};
</script>

<style scoped lang="scss">
	@import 'MyCoupon.scss';
</style>